<template>
  <div>
    <h3>这是父组件</h3>
    <p>子组件数据:{{ dataS }}</p>
    <son ref="son"></son>
  </div>
</template>
<script>
import Son from './Son';
/**
 * 正常渲染时，父组件先完成渲染，子组件中通过$parent可以难倒父组件中的数据。相反，父组件在this.$children.sonData时，
 * 子组件Son的数据还没有完成初始化,使用$children拿不到子组件中的数据，而使用$refs就可以在mounted阶段拿到子组件数据
 *
 */
export default {
  data() {
    return { fatData: '父组件数据', dataS: '' };
  },
  components: {
    son: Son
  },
  // 必须在mounted阶段，mounted阶段模板已经挂载到页面上了，可以推断子组件Son数据初始化一定完成了
  mounted() {
    // console.log(this.$children); // []
    // this.dataS = this.$children.sonData;
    console.log(this.$refs.son); // []
    this.dataS = this.$refs.son.sonData;
  }
};
</script>
